<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>配置生成</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/element-ui/index.css">
    <link rel="stylesheet" type="text/css" href="/diff2html/diff2html.min.css"/>

    <!-- 引入组件库 -->
    <script src="/vue2/vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <script src="/vue2/axios.min.js"></script>
    <script src="/diff/diff.js"></script>
    <script src="/diff2html/diff2html-ui.min.js"></script>
    <script src="/ace/ace.js"></script>

    <style>
        .d2h-diff-table {
            width: 100%;
            border-collapse: collapse;
            font-family: Menlo, Consolas, monospace;
            font-size: 13px;
        }

        .el-dialog__body {
            padding: 30px 20px;
            color: #606266;
            font-size: 14px;
            word-break: keep-all;
        }

        .d2h-file-diff {
            overflow-y: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .ace_editor {
            border: 1px solid lightgray;
            margin: 0;
            height: 200px;
            width: 100%;
            font-size: 14px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" style="margin: 10px" v-cloak>
    <!-- 菜单 -->
    <el-menu :default-active="'1'"
             class="el-menu-demo"
             mode="horizontal"
             @select="handleSelect"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b" style="margin-bottom: 10px">
        <el-menu-item index="1"><i class="el-icon-tickets"></i>模板配置</el-menu-item>
        <el-menu-item index="2"><i class="el-icon-notebook-2"></i>参数配置</el-menu-item>
        <el-menu-item index="3"><i class="el-icon-finished"></i>生成结果</el-menu-item>
        <el-menu-item index="4" style="float: right"><i class="el-icon-set-up"></i>配置</el-menu-item>
    </el-menu>

    <!-- 模版配置 -->
    <div v-show="page1">
        <template>
            <el-select v-model="tempId" v-on:change="getTemplate" placeholder="请选择" filterable>
                <el-option
                        v-for="item in templates"
                        :key="item.id"
                        :label="item.name+'  '+item.version"
                        :value="item.id">
                </el-option>
            </el-select>
            <span style="margin-left: 10px"/>
            <span v-show="!isTemplateEdit">
              <el-button type="primary" icon="el-icon-plus" size="small"
                         v-on:click="openAddTemplate">新增</el-button>
              <el-button type="primary" icon="el-icon-document-checked" size="small"
                         v-on:click="updateTemplate">提交更新</el-button>
              <el-button type="success" icon="el-icon-document-copy" size="small"
                         v-on:click="copyTemplate">复制</el-button>
            </span>
        </template>
        <div id="templateTable" style="margin-top: 10px">
            <el-form :inline="true">
                <el-form-item label="文件名">
                    <el-input v-model="template.name" autocomplete="off" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="版本">
                    <el-input v-model="template.version" autocomplete="off" style="width: 80px"></el-input>
                </el-form-item>
                <el-form-item label="文件类型">
                    <el-input v-model="template.fileType" autocomplete="off" style="width: 100px"
                              @change="changeAceMode('templateEditor', template.fileType)"></el-input>
                </el-form-item>
                <el-form-item label="nacos组">
                    <el-input v-model="template.nacosGroup" autocomplete="off" style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item label="nacos命名空间">
                    <el-input v-model="template.nacosNamespace" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <pre id="templateEditor"></pre>
        </div>
        <el-dialog title="新增模板" :visible.sync="addTemplateVisible"
                   @opened="changeAceMode('template2Editor', templateForm.fileType)">
            <el-form :inline="true" :model="templateForm">
                <el-form-item label="文件名">
                    <el-input v-model="templateForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="版本">
                    <el-input v-model="templateForm.version" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文件类型">
                    <el-input v-model="templateForm.fileType" autocomplete="off"
                              @change="changeAceMode('template2Editor', templateForm.fileType)"></el-input>
                </el-form-item>
                <el-form-item label="nacos组">
                    <el-input v-model="templateForm.nacosGroup" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="nacos命名空间">
                    <el-input v-model="templateForm.nacosNamespace" autocomplete="off"></el-input>
                </el-form-item>
                <div></div>
            </el-form>
            <span>模版内容</span>
            <pre id="template2Editor"></pre>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTemplateVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTemplate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 参数配置 -->
    <div v-show="page2">
        <div style="margin-bottom: 10px">
            <el-select v-model="groupId" v-on:change="getConfigs" placeholder="请选择" filterable>
                <el-option
                        v-for="item in groups"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <span style="margin-left: 10px"/>
            <el-button type="primary" icon="el-icon-plus" size="small"
                       v-on:click="addGroupVisible = true">新增组
            </el-button>
            <el-button type="primary" icon="el-icon-document-checked" size="small" v-on:click="saveConfigs">提交更新</el-button>
            <el-button type="success" icon="el-icon-magic-stick" size="small"
                       v-on:click="selectTemplate2Visible = true ">解析模板参数
            </el-button>
            <el-button type="success" icon="el-icon-document-add" size="small"
                       v-on:click="selectTemplateVisible = true">生成文件
            </el-button>
        </div>
        <pre id="configEditor"></pre>
        <el-dialog title="新增组" :visible.sync="addGroupVisible">
            <el-form :model="groupForm">
                <el-form-item label="组名">
                    <el-input v-model="groupForm.groupName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addGroupVisible = false">取 消</el-button>
                <el-button type="primary" @click="addGroup">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="选择模版" :visible.sync="selectTemplateVisible">
            <el-input style="width: 300px" v-model="templateSearch" prefix-icon="el-icon-search"
                      @input="searchTemplateAndCheck"
                      :clearable="true" placeholder="搜索" autocomplete="off"></el-input>
            <div style="margin-top: 15px"></div>
            <el-checkbox :indeterminate="isTemplateIndeterminate" v-model="selectTemplateChekAll"
                         @change="handleCheckAllChange">全选
            </el-checkbox>
            <div style="margin-top: 15px"></div>
            <el-checkbox-group v-model="selectTemplateChecked" @change="handleCheckedTemplateChange">
                <el-checkbox v-for="temp in templates" :label="temp.id" :key="temp.id">{{temp.name}}
                    [{{temp.version}}]
                </el-checkbox>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="selectTemplateVisible = false; getTemplates">取 消</el-button>
                <el-button type="primary" @click="genConfigTemplate">生 成</el-button>
            </div>
        </el-dialog>
        <el-dialog title="选择模版" :visible.sync="selectTemplate2Visible">
            <el-input style="width: 300px" v-model="template2Search" prefix-icon="el-icon-search"
                      @input="searchTemplate2AndCheck"
                      :clearable="true" placeholder="搜索" autocomplete="off"></el-input>
            <div style="margin-top: 15px"></div>
            <el-checkbox :indeterminate="isTemplate2Indeterminate" v-model="selectTemplate2ChekAll"
                         @change="handleCheckAllChange2">全选
            </el-checkbox>
            <div style="margin-top: 15px"></div>
            <el-checkbox-group v-model="selectTemplate2Checked" @change="handleCheckedTemplate2Change">
                <el-checkbox v-for="temp in templates" :label="temp.id" :key="temp.id">{{temp.name}}
                    [{{temp.version}}]
                </el-checkbox>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="selectTemplate2Visible = false; getTemplates; templateIds = []">取 消</el-button>
                <el-button type="primary" @click="parseTemplateConfig">解 析</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 生成结果 -->
    <div v-show="page3">
        <el-form :inline="true">
            <el-form-item>
                <el-input v-model="search" prefix-icon="el-icon-search" @input="getResults" :clearable="true"
                          placeholder="搜索" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="searchTime"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="getResults"
                        :default-time="['06:00:00','00:00:00']">
                </el-date-picker>
            </el-form-item>
            <el-button type="primary" icon="el-icon-download" size="small" v-on:click="selectResultVisible = true">下载
            </el-button>
            <el-button type="primary" icon="el-icon-delete" size="small" v-on:click="clearResult">清除结果</el-button>
        </el-form>

        <el-container style="border: 1px solid #eee">
            <el-aside width="500px">
                <el-table
                        :data="results"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="fileName"
                            label="文件名">
                    </el-table-column>
                    <el-table-column width="80px"
                                     prop="version"
                                     label="版本">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                </el-table>
            </el-aside>
            <el-card class="box-card" style="margin-left: 10px;width: 100%">
                <el-form :inline="true" :model="result">
                    <el-button :disabled="result.fileName === undefined" @click="pushNacosVisible = true" size="small"
                               type="success" icon="el-icon-upload">发布
                    </el-button>
                    <el-form-item label="nacos服务" style="margin-left: 10px">
                        <el-select v-model="nacosServer" @change="getNacosNamespaces" placeholder="请选择">
                            <el-option v-for="item in nacosServers" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="nacos命名空间">
                        <el-select v-model="result.nacosNamespace" placeholder="请选择" style="width: 150px">
                            <el-option
                                    v-for="item in namespaces"
                                    :key="item.namespace"
                                    :label="item.namespaceShowName"
                                    :value="item.namespace">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <span style="font-size: small; color: #4c4b4b"
                          v-show="result.fileName !== undefined">文件名: <strong>{{result.fileName}}</strong>  版本: <strong>{{result.version}}</strong>  nacos组: <strong>{{result.nacosGroup}}</strong>  文件类型: <strong>{{result.fileType}}</strong>
          </span>
                </el-form>
                <pre id="resultEditor"></pre>
            </el-card>
        </el-container>
        <el-dialog title="下载" :visible.sync="selectResultVisible">
            <el-input style="width: 300px" v-model="downloadSearch" prefix-icon="el-icon-search"
                      @input="searchDownloadAndCheck"
                      :clearable="true" placeholder="搜索" autocomplete="off"></el-input>
            <div style="margin-top: 15px"></div>

            <el-checkbox :indeterminate="isResultIndeterminate" v-model="selectResultChekAll"
                         @change="handleCheckAllResult">全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="selectResultChecked" @change="handleCheckedResultChange">
                <el-checkbox v-for="temp in results" :label="temp.id" :key="temp.id">{{temp.fileName}}[{{temp.version}}]
                </el-checkbox>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="selectResultVisible = false">取 消</el-button>
                <el-button type="primary" @click="download">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="文件比较" :visible.sync="pushNacosVisible" @open="compareContent" width="75%">
            <div id="compare"></div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="pushNacosVisible = false">取 消</el-button>
        <el-button type="primary" @click="pushNacos">提 交</el-button>
      </span>
        </el-dialog>
    </div>
    <!-- 配置 -->
    <div v-show="page4">
        <div style="margin-top: 10px">
            <el-button type="primary" icon="el-icon-check" size="small" v-on:click="saveNacosServers">保存nacos配置
            </el-button>
            <div style="margin-top: 10px"></div>
            <pre id="nacosServersEditor"></pre>

            <div style="margin-top: 10px"></div>
            编辑器的快捷键:
            <pre id="keymap" style="width: 440px">|                 名称                  |    快捷键    |
| ------------------------------------- | ------------ |
| openCommandPallete(打开命令面板)      | F1           |
| showKeyboardShortcuts(显示键盘快捷键) | Ctrl-Alt-H   |
| showSettingsMenu(显示设置菜单)        | Ctrl-,       |
| goToNextError(转到下一个错误)         | Alt-E        |
| goToPreviousError(转到上一个错误)     | Alt-Shift-E  |
| gotoline(跳转行)                      | Ctrl-L       |
| fold(折叠)                            | Alt-L        |
| toggleFoldWidget(折叠转换)            | F2           |
| foldOther(折叠其他)                   | Alt-0        |
| findnext(找下一个)                    | Ctrl-K       |
| selectOrFindNext(选择或查找下一个)    | Alt-K        |
| removeline(删除行)                    | Ctrl-D       |
| duplicateSelection(复制选择)          | Ctrl-Shift-D |
| togglecomment(注释)                   | Ctrl-/       |
| toggleBlockComment(块注释)            | Ctrl-Shift-/ |
| replace(替换)                         | Ctrl-H       |
| undo(撤销)                            | Ctrl-Z       |
| redo(重做)                            | Ctrl-Shift-Z |
| copylinesup(复制线)                   | Alt-Shift-Up |
| movelinesup(向上移动行)               | Alt-Up       |
| movelinesdown(向下移动行)             | Alt-Down     |
| blockoutdent(左缩进)                  | Ctrl-[       |
| blockindent(右缩进)                   | Ctrl-]       |
| touppercase(大写)                     | Ctrl-U       |
| tolowercase(小写)                     | Ctrl-Shift-U |
| alignCursors(对齐光标)                | Ctrl-Alt-A   |
| findAll(找到所有)                     | Ctrl-Alt-K   |</pre>
        </div>
    </div>
</div>
<script src="main.js"></script>
</body>
</html>
